<template>
    <div class="app-container">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    size="small"
                    :inline="true"
                    v-show="showSearch"
                    label-width="68px"
                >
                    <el-form-item label="表单名称" prop="formName">
                        <el-input
                            v-model="queryParams.formName"
                            placeholder="请输入表单名称"
                            clearable
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="表单标签" prop="formTags">
                        <el-input
                            v-model="queryParams.formTags"
                            placeholder="请输入表单标签"
                            clearable
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="表单状态" prop="isSubmit">
                        <el-select
                            v-model="queryParams.isSubmit"
                            placeholder="请选择表单状态"
                        >
                            <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="填写时间">
                        <el-date-picker
                            v-model="dateRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <right-toolbar
                        :showSearch.sync="showSearch"
                        @queryTable="getList"
                        :columns="columns"
                    ></right-toolbar>
                </el-row>
                <el-table
                    v-loading="loading"
                    :data="formList"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                    />
                    <el-table-column
                        label="表单名称"
                        align="center"
                        key="formName"
                        prop="formName"
                        v-if="columns[0].visible"
                    />
                    <el-table-column
                        label="表单标签"
                        align="center"
                        key="tagsArray"
                        prop="tagsArray"
                        v-if="columns[1].visible"
                        :show-overflow-tooltip="true"
                    >
                        <template align="center" slot-scope="scope">
                            <span
                                v-for="(item, index) in scope.row.tagsArray"
                                :key="(item, index)"
                                ><el-tag>{{ item }}</el-tag
                                >&#12288;</span
                            >
                        </template>
                    </el-table-column>

                    <el-table-column
                        label="表单状态"
                        align="center"
                        v-if="columns[1].visible"
                        width="160"
                    >
                        <template slot-scope="scope">
                            <span
                                style="color: #e6a23c"
                                v-if="scope.row.isSubmit == false"
                                >未提交</span
                            >
                            <span
                                style="color: #67c23a"
                                v-if="scope.row.isSubmit == true"
                                >已提交</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="填写时间"
                        align="center"
                        v-if="columns[1].visible"
                        width="160"
                    >
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.time) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        width="160"
                        class-name="small-padding fixed-width"
                    >
                        <template slot-scope="scope">
                            <el-link
                                :underline="false"
                                class="el-icon-view"
                                v-if="scope.row.isSubmit==true"
                                @click="seeRecord(scope.row)"
                                >记录 </el-link
                            >&nbsp;
                          <el-link
                                :underline="false"
                                class="el-icon-edit"
                                v-if="scope.row.isSubmit==false"
                                @click="continueFill(scope.row)"
                                >继续填写 </el-link
                            >&nbsp;
                            &nbsp;
                            <el-link
                                :underline="false"
                                class="el-icon-edit"
                                v-if="scope.row.allCanSee == true"
                                @click="seeResult(scope.row.formId)"
                                >结果
                            </el-link>
                            &nbsp;
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNo"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />

    </div>
</template>

<script>
import { nanoid } from "nanoid";
import { listForm } from "@/api/forms/iwrite.js"; //修改表单状态
//引入复制功能
import Vue from "vue";
import VueClipboard from "vue-clipboard2";

Vue.use(VueClipboard);

export default {


    data() {
        return {
            //url对话框
            urlDialogVisible: false,
            //url
            url: "",
            // 遮罩层
            loading: true,
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表单表格数据
            formList: null,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                formName: undefined,
                formTags:undefined,
                isSubmit:undefined
            },
            //状态选择
            statusOptions:[
                {value:true,label:"已完成"},
                {value:false,label:"未完成"}
            ],
            // 列信息
            columns: [
                { key: 0, label: `表单名称`, visible: true },
                { key: 1, label: `填写时间`, visible: true },
            ],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询表单列表 */
        getList() {
            this.loading = true;
            listForm(this.addDateRange1(this.queryParams, this.dateRange)).then(
                (response) => {
                    console.log(response);
                    this.formList = response.records;
                    this.formList.forEach((item) => {
                        this.$set(item, "tagsArray", []);
                        if (item.formTags != null) {
                            item.tagsArray = item.formTags.split(",");
                        }
                    });
                    this.total = response.counts;
                    console.log(this.formList);
                    this.loading = false;
                }
            );
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.userId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },

        //查看表单结果，进行带参（表单id）跳转
        seeResult(formId) {
            this.$router.push({
                path: "/forms/result",
                query: { formId: formId },
            });
        },
        //查看填写记录
        seeRecord(row){
            this.$router.push({path:'/forms/record',query: {recordId:row.id,formId:row.formId}})
        },
        //继续填写
        continueFill(row){
            this.$router.push({path:'/forms/write',query: {formId:row.formId,recordId:row.id}})
        }
    },
};
</script>
